<template>
  <ECharts :option="option" />
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import { ECOption } from "@/components/ECharts/config";
import ECharts from "@/components/ECharts/index.vue";
import { graphic } from "echarts";

const props = defineProps({
  data: {
    type: Array as () => any[],
    default: () => []
  }
});

const option = ref<ECOption | any>({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  grid: {
    left: "4%",
    right: "4%",
    bottom: "15%",
    top: "25%"
  },
  xAxis: {
    type: "category",
    data: ["内场草坪区", "内场看台区", "外围区域"],
    axisLine: {
      lineStyle: {
        color: "#ffffff"
      }
    },
    axisLabel: {
      fontSize: 20,
      color: "#ffffff",
      fontFamily: "Microsoft YaHei"
    }
  },

  yAxis: {
    type: "value",
    show: false,
    axisLine: {
      show: false,
      lineStyle: {
        color: "#dddddd"
      }
    },
    axisTick: {
      show: true,
      lineStyle: {
        color: "#dddddd"
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: "dotted",
        color: "#dddddd",
        dashOffset: 2
      }
    },
    axisLabel: {
      padding: [0, 5, 0, 0],
      fontSize: 14,
      color: "#666666",
      fontFamily: "Microsoft YaHei"
    }
  },
  series: [
    {
      type: "bar",
      data: props.data,
      barWidth: 50,
      itemStyle: {
        color: new graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#b1c4e9"
          },
          {
            offset: 1,
            color: "#568af4"
          }
        ]),
        shadowColor: "black", // 默认阴影颜色
        shadowOffsetX: 10, // 默认阴影偏移量 X
        shadowBlur: 20 // 默认阴影模糊大小
      },
      label: {
        show: true, // 显示标签
        formatter: "{c}", // 标签内容格式器，{c} 表示数据值
        position: "top", // 标签位置
        color: "#fff",
        fontSize: 20
      }
    }
  ]
});

watchEffect(() => {
  option.value.series[0].data = props.data;
});
</script>
